/**
 * @author laixuemei
 * @time 2022-01-17
 * @description 路由入口
 */

import { connect } from 'react-redux'
// import { HashRouter as Router,Switch, Route, Redirect } from 'react-router-dom'
 import { BrowserRouter as Router, Redirect, Route, Switch,  } from 'react-router-dom'
 
 // 懒加载
import Loadable from 'react-loadable'
import { Spin } from 'antd'

function myLoader(loader) {
    return Loadable({
        loader: loader,
        loading: function() {
            return (
                <div style={{padding: '10vh 0 0', textAlign: 'center'}}><Spin size='large'></Spin></div>
            )
        },
    })
}
const Login = myLoader(() => import('./Login'))
const Home = myLoader(() => import('./Home'))
const NotFound = myLoader(() => import('./Common/NotFound'))
const NotRight = myLoader(() => import('./Common/NotRight'))
const ProjectList = myLoader(() => import('./project/ProjectList'))
const ProjectEdit = myLoader(() => import('./project/ProjectEdit'))

function App( {token} ) {
    function hasToken() {
    return !!token
    }
    return (
        <Router>
            <Switch>
                <Route path='/404' component={ NotFound } />
                <Route path='/login' component={ Login } exact/>
                {/* 可以对Route的render方法进行重载，可以把渲染方法获取到，就可以在方法中来进行业务处理 */}
                <Route path='/home' exact render={
                    function(props ) {
                        // console.log(arguments)
                        // 将路由的方法传给NotRight组件
                        return hasToken() ? <Home/> : <NotRight {...props}/>
                    }
                }/>
                <Route path='/project/list' exact render={
                    function(props ) {
                        // console.log(arguments)
                        // 将路由的方法传给NotRight组件
                        return hasToken() ? <ProjectList/> : <NotRight {...props}/>
                    }
                }/>
                <Route path='/project/edit' exact render={
                    function(props ) {
                        // console.log(arguments)
                        // 将路由的方法传给NotRight组件
                        return hasToken() ? <ProjectEdit/> : <NotRight {...props}/>
                    }
                }/>
                {/* 精确匹配exact */}
                <Redirect path='/' to='/login' exact />
                {/* 如果以上的所有路由都没有匹配上，直接重定向到404 */}
                <Redirect to='/404'/>
            </Switch>
        </Router>
    )
}
function mapStateToProps(state) {
    return{
    token:state.common.token
    }
} 
export default connect(mapStateToProps)(App)